<template>
  <el-collapse v-model="activeName" accordion class="p-4">
    <el-collapse-item
      v-for="(menu, menuKey, seq) in nav.children"
      :key="menu.title"
      :name="seq"
    >
      <template v-slot:title>{{ menu.title.toUpperCase() }}</template>
      <ul>
        <li
          v-for="(subMenu, subMenuKey) in menu.children"
          :key="subMenu.title"
          @click="handleClose"
        >
          <NuxtLink :to="getRoute(menuKey, subMenuKey)" no-prefetch>
            {{
              subMenu.title
                .split('_')
                .map((k) => k[0].toUpperCase() + k.substring(1))
                .join(' ')
            }}
          </NuxtLink>
        </li>
      </ul>
    </el-collapse-item>
  </el-collapse>
</template>
<script>
export default {
  name: 'NcCompMenuAccordion',
  props: {
    nav: Object,
  },
  data() {
    return {
      activeName: 0,
    }
  },
  methods: {
    /**
     * 通过`localePath`函数可以自动得到`i18n`默认的路由，配合第二个参数，可以选择语言
     * @param menuKey
     * @param subMenuKey
     * @returns {*}
     */
    getRoute(menuKey, subMenuKey) {
      return this.localePath(`/${menuKey}/${subMenuKey}`, this.$i18n.locale)
    },
    handleClose() {
      this.$emit('close')
    },
  },
}
</script>
